<template>
	<view class="pat-wrapper">
		<view class="pt-grid">
			<view class="pt-card flex-center">
				<view class="bed-cc">
					<view class="txt">+3床</view>
					<text class="iconfont icon-bingchuang"></text>
				</view>
				<view class="flex_bd">
					<view class="pt-head">
						<text class="z-id">张麻子</text>
						<text class="z-num">住院号：007</text>
					</view>
					<view class="pt-meta flex-center justify-zBetween">
						<view class="item">性别：保密</view>
						<view class="item">日期：2021-05-31 09:22:06</view>
					</view>
				</view>
				<view class="iconfont icon-erweima"></view>
			</view>
			<view class="pt-tabs">
				<view class="pt-tab-head flex">
					<view class="pt-tab__title">
						导管列表
					</view>
				</view>

			</view>
		</view>
		<view class="pt-tab-content">
			<u-checkbox-group @change="checkboxGroupChange" width="36rpx">
				<view class="cath-list-cell" v-for="(item, index) in  orderList" :key="index">
					<view class="cath-list-grid">
						<view class="cath-list-body">
							<view class="cath-head">
								<view class="title ellipsis">{{item.title}}</view>
								<view class="cath-checkbox">
									<u-checkbox @change="checkboxChange" v-model="item.checked" active-color='#00a5e9'
										size="36" shape="circle"></u-checkbox>
								</view>
							</view>
							<view class="cath-items"@click="collapse(index)">
								<view class="cath-item"><text>到期</text>2021-05- -31 09:22:06</view>
								<view class="cath-item"><text>置管时间</text>2021-05- -31 09:22:06</view>
								<view class="cath-people">
									<view class="cath-item"><text>操作人</text>路飞</view>
								</view>
							</view>
						</view>
						<view class="cath-list-footer" v-if="item.show">
							<view class="cath-list-dage">
								附属物信息
							</view>
							<view class="cath-head">
								<view class="title ellipsis">{{item.subText}}</view>
								<view class="cath-checkbox">
									<u-checkbox @change="checkboxChange" v-model="item.checked1" active-color='#00a5e9'
										size="36" shape="circle"></u-checkbox>
								</view>
							</view>
							<view class="cath-items">
								<view class="cath-item"><text>到期</text>2021-05- -31 09:22:06</view>
								<view class="cath-item"><text>置管时间</text>2021-05- -31 09:22:06</view>
								<view class="cath-people">
									<view class="cath-item"><text>操作人</text>路飞</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</u-checkbox-group>
		</view>
		<view class="pt-fixed">
			<view class="pt-bt flex-center">
				<view class="checkedAll">
					<u-checkbox v-model="checkedAll" :disabled="false" active-color='#00a5e9' size="36" shape="circle"
						@change="checked">
						<text class="check-label">全选</text>
					</u-checkbox>
				</view>
				<view class="flex_bd">
					<button type="default" class="btn print-btn">打印</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderList: [{
					title: "动脉导管",
					infos: [''],
					checked: true,
					checked1: false,
					show: false,
					subText: '辅料贴'
				}, {
					title: "动脉导管",
					infos: [''],
					checked: true,
					checked1: false,
					show: false,
					subText: '辅料贴'
				}, {
					title: "动脉导管",
					infos: [''],
					checked: false,
					show: true,
					subText: '辅料贴',
					checked1: false,
				}],
				checkedAll: false,
				flag: false
			}
		},
		onLoad() {

		},
		methods: {
			openUrl(e) {
				console.log(e)
				uni.navigateTo({
					url: e
				});
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				//console.log(e);
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				// console.log(e);
			},
			checked() {
				this.orderList.map(val => {
					val.checked = true;
					val.checked1 = true;
				})
			},
			collapse(index) {
				var temp = this.orderList;
				temp[index].show = !temp[index].show;
				this.orderList = temp
			}

		}
	}
</script>

<style lang="scss">
	.u-checkbox-group {
		display: block;
	}

	.pt-tabs {
		margin-top: 24rpx;
	}

	.cath-list-cell {
		margin-bottom: 16rpx;
	}

	.cath-list-grid {
		background-color: #fff;
		border-radius: 16px;
		overflow: hidden;
	}

	.cath-list-body {
		padding: 26rpx 30rpx 6rpx;
		background-color: #e9f1f7;
		border-radius: 16rpx;
	}

	.cath-head {
		margin-bottom: 20rpx;
		position: relative;

		.title {
			font-size: 30rpx;
			color: #373b4e;
			line-height: 1.2;
		}
	}

	.cath-list-footer {
		background-color: #fff;
		padding: 20rpx 20rpx 0;

		.cath-list-dage {
			text-align: center;
			font-size: 24rpx;
			color: #999999;
			line-height: 56rpx;
			position: relative;
		}

		.cath-list-dage::before {
			position: absolute;
			content: '';
			left: 0;
			top: 50%;
			border-top: 1rpx dashed #cfddea;
			width: 232rpx;
		}


		.cath-list-dage::after {
			position: absolute;
			content: '';
			right: 0;
			top: 50%;
			border-top: 1rpx dashed #cfddea;
			width: 232rpx;
		}
	}

	.cath-items {
		position: relative;

		.cath-item {
			font-size: 24rpx;
			color: #7a8892;
			line-height: 58rpx;

			text {
				margin-right: 18rpx;
				color: #9e9fa9;
			}
		}

		.cath-people {
			position: absolute;
			top: 0;
			right: 0;
			padding-right: 10rpx;
		}
	}




	.pt-tab-head {
		height: 80rpx;

		.pt-tab__title {
			position: relative;
			line-height: 80rpx;
			font-size: 34rpx;
			color: #373b4e;
		}

		.pt-tab__title::after {
			position: absolute;
			content: '';
			left: 50%;
			margin-left: -28rpx;
			bottom: 0;
			height: 5rpx;
			width: 56rpx;
			background-color: #00a5e9;
		}

	}

	.pt-tab-content {
		padding: 20rpx 30rpx 200rpx;
	}
	
	.pt-head{
		margin-bottom: 20rpx;
		
		.z-id{
			font-size: 32rpx;
			font-weight: 700;
			margin-right: 20rpx;
		}
		
		.z-num{
			font-size: 24rpx;
		}
	}

	.bed-cc {
		width: 120rpx;
		height: 120rpx;
		border-radius: 120rpx;
		background-color: #FFFFFF;
		text-align: center;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-right: 30rpx;

		.txt {
			color: #373b4f;
		}

		.iconfont {
			font-size: 50rpx;
			line-height: 1;
			color: #00a4e8;
		}
	}

	.pt-meta {
		font-size: 24rpx;
	}

	.pt-card {
		position: relative;
		line-height: 1.2;
		background: url(../../static/images/paient/bg.jpg) no-repeat;
		background-size: cover;
		height: 176rpx;
		box-sizing: border-box;
		padding: 30rpx;
		color: #FFFFFF;
		box-shadow: 1px 4px 10px #9bbede;
		border-radius: 30rpx;
		overflow: hidden;

		.icon-erweima {
			position: absolute;
			right: 10rpx;
			top: 10rpx;
			font-size: 44rpx;
		}
	}

	.pt-grid {
		background-color: #FFFFFF;
		padding: 20rpx 30rpx 0 30rpx;
	}

	.pat-wrapper {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.cath-checkbox {
		position: absolute;
		right: 0;
		top: 50%;
		margin-top: -18rpx;
		z-index: 111;
	}


	.pt-fixed {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 111;
		background-color: #fff;
		height: 100rpx;

		.checkedAll {
			width: 190rpx;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}


		.check-label {
			color: #00a5e9;
			margin-left: 10rpx;
		}

		.print-btn {
			border-radius: 0;
			background-color: #00a5e9;
			font-size: 36rpx;
			color: #fff;
			height: 100rpx;
			padding: 20rpx 30rpx;
			line-height: 60rpx;
			text-align: center;
		}
	}
</style>
